<template>
  <a-card :bordered="false">
    <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        bordered
        rowKey="rowIndex"
        @change="handleTableChange"
    >
    </a-table>
  </a-card>
</template>

<script>
export default {
  name: 'TableTotal',
  data() {
    return {
      columns: [
        {
          title: '#',
          width: '180px',
          align: 'center',
          dataIndex: 'rowIndex',
          customRender: function (text, r, index) {
            return (text !== '合计') ? (parseInt(index) + 1) : text
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '贡献点',
          dataIndex: 'point',
        },
        {
          title: '等级',
          dataIndex: 'level',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
        },
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      dataSource: [
        {id: "1", name: '张三', point: 23, level: 3, updateTime: '2019-8-14'},
        {name: '小王', point: 6, level: 1, updateTime: '2019-8-13'},
        {name: '李四', point: 53, level: 8, updateTime: '2019-8-12'},
        {name: '小红', point: 44, level: 5, updateTime: '2019-8-11'},
        {name: '王五', point: 97, level: 10, updateTime: '2019-8-10'},
        {name: '小明', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '小张', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '小六', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '小五', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '小赵', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '李华', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '小康', point: 33, level: 2, updateTime: '2019-8-10'},
        {name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10'},
      ],
      newArr: [],
      newDataSource: [],
    }
  },
  mounted() {
    // this.tableAddTotalRow(this.columns, this.dataSource)
    /*新增分页合计方法*/
    this.newDataSource = this.dataSource
    this.dataHandling(this.ipagination.pageSize - 1)
  },
  watch: {
    'ipagination.pageSize': function (val) {
      this.dataHandling(val - 1)
    }
  },
  methods: {
    /** 表格增加合计行 */
    tableAddTotalRow(columns, dataSource) {
      let numKey = 'rowIndex'
      let totalRow = {[numKey]: '合计'}
      columns.forEach(column => {
        let {key, dataIndex} = column
        if (![key, dataIndex].includes(numKey)) {

          let total = 0
          dataSource.forEach(data => {
            total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
            console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
          })

          if (Number.isNaN(total)) {
            total = '-'
          }
          totalRow[dataIndex] = total
        }
      })

      dataSource.push(totalRow)
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination;
    },
    /*如果分页走这个方法*/
    dataHandling(num) {
      this.newArr = [];
      let arrLength = this.newDataSource.length; // 数组长度;
      let index = 0;
      for (let i = 0; i < arrLength; i++) {
        if (i % num === 0 && i !== 0) {
          this.newArr.push(this.newDataSource.slice(index, i));
          index = i;
        }
        if ((i + 1) === arrLength) {
          this.newArr.push(this.newDataSource.slice(index, (i + 1)));
        }
      }
      var arrs = this.newArr;
      for (let i = 0; i < arrs.length; i++) {
        let arr = arrs[i];
        let newArr = {};
        newArr.name = "-";
        newArr.updateTime = "-";
        newArr.rowIndex = "合计"
        var level = 0;
        var point = 0;
        for (let j = 0; j < arr.length; j++) {
          level += arr[j].level;
          point += arr[j].point;
        }
        newArr.level = level;
        newArr.point = point;
        arrs[i].push(newArr);
      }
      var newDataSource = [];
      for (let i = 0; i < arrs.length; i++) {
        let arr = arrs[i];
        for (var j in arr) {
          newDataSource.push(arr[j]);
        }
      }
      console.log(this.dataSource)
      this.dataSource = Object.values(newDataSource);
      console.log(this.dataSource)
    }
  }
}
</script>

<style scoped>

</style>